<template>
  <div class="kejianbianji">
    <div class="banner">
      <h2>批发价契约</h2>
    </div>
    <div class="content">
      <div class="buttons">
        <a-button type="primary" class="yanshi" @click="insertPre"
          >插入演示</a-button
        >
        <span>插入文件</span>
        <a-button type="primary" @click="insertPre">删除演示</a-button>
      </div>
      <div class="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in banners" :key="index">
            <img :src="item" alt="" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>
      </div>
    </div>
    <a-modal v-model="visible" title="插入演示" @ok="handleOk">
      <div>
        <h3
          style="display: inline-block;margin-right: 40px;margin-bottom: 50px;"
        >
          演示类型：
        </h3>
        <a-select
          default-value="请选择"
          style="width: 138px;"
          @change="handleChange"
        >
          <a-select-option value="1">
            视频
          </a-select-option>
          <a-select-option value="2">
            图片
          </a-select-option>
          <a-select-option value="3">
            内置模型
          </a-select-option>
        </a-select>
      </div>
      <div>
        <h3
          style="display: inline-block;margin-right: 40px;margin-bottom: 50px;"
        >
          具体内容：
        </h3>
        <a-upload
          name="file"
          :multiple="false"
          @change="changeFile"
          :customRequest="customRequest"
        >
          <!-- <a-button type="primary" circle> <a-icon type="upload" />上传</a-button> -->
          <a-button icon="upload" @click="deliverKey(data)"
            >点击上传内容</a-button
          >
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { URL } from '../api/api.js'

let vm = this
export default {
  name: 'kejianbianji',
  components: {
    swiper,
    swiperSlide,
  },
  methods: {
    changeFile(info) {
      // 上传文件
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    customRequest(data) {
      // 上传提交
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('key', this.key)
      this.modalVisible = true
      this.saveFile(formData)
    },
    deliverKey(data) {
      this.key = data.key
    },
    saveFile(formData) {
      this.axios({
        method: 'post',
        url: '/course/add_sectionfile/',
        headers: {},
        params: {},
        data: formData,
      })
        .then(response => {
          this.modalVisible = false
          this.$message.success('上传成功！')
          this.getTreeList()
        })
        .catch(function(error) {})
    },
    //插入演示
    insertPre() {
      // this.axios.post('/course/upload_attachment/',{
      //     key: this.chapterData.key,
      //     page_number:'',
      //     mytype:'',
      //     file:'',
      // })
      this.visible = true
    },
    //弹框相关
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.visible = false
    },
    //选择器相关
    handleChange(value) {
      this.typeValue = value
    },
  },
  mounted() {
    this.$parent.show = false //使得父节点的课程内容管理隐藏
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    ;(async () => {
      await this.axios.post('/course/query_all/').then(res => {
        this.setTree = res || []
        this.page_numbers = this.setTree[0].children[0].page_numbers
        for (let i = 0; i < this.page_numbers; i++) {
          this.axios
            .post('/course/get_sectionfile_page/', {
              key: 2,
              page_number: i + 1,
            })
            .then(res => {
              let url = this.URL + '/' + res.url
              this.banners.push(url)
            })
        }
      })
    })()
  },
  data() {
    return {
      URL: URL,
      swiperOption: {
        // autoplay: {
        // delay: 100000,
        // stopOnLastSlide: false,
        // disableOnInteraction: false
        // },
        // // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true, //允许分页点击跳转
        },
        // // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        effect: 'slide',
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: true,
        },
      },
      banners: [], //轮播图数组
      //插入附件弹框可见相关
      visible: false,
      //选择器的值
      typeValue: null,
    }
  },
  computed: {
    chapterData() {
      return this.$store.state.chapterData
    },
  },
}
</script>

<style lang="scss">
.kejianbianji {
  .banner {
    width: calc(100vw - 256px);
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    h2 {
      margin-left: 20px;
    }
  }
  .content {
    .buttons {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      .yanshi {
        margin-left: 760px;
        margin-right: 30px;
      }
      span {
        margin-right: 20px;
      }
    }
    .swiper {
      position: absolute;
      top: 175px;
      left: 400px;
      width: 1000px;
      height: 600px;
      background-color: #fff;
      margin: 0 auto;
      img {
        width: 1000px;
        height: 600px;
        background-color: skyblue;
      }
    }
  }
}
</style>
